{include file="public/header-static"/}
{include file="public/sidebar"/}


<div id="main">
    {include file="public/header"/}
    <main class="main-content">
        <div class="container">
            <div class="page-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="#">首页</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">用户设置  </li>
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{:url('/systemsett/identityAdd')}" method="post" target="iframe_form" enctype="multipart/form-data" >
                                <div class="form-group row">
                                    <input type="hidden" value="{$info['id']}" name="id">
                                    <label for="" class="col-sm-1 col-form-label">身份名称</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="name"  class="form-control" value="{$info['name']}" placeholder="身份名称">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">默认图标</label>
                                    <div class="col-sm-2">
                                        <input type="hidden" class="form-control default_icon" name="default_icon" required="" aria-required="true">
                                        <button type="button" class="btn btn-secondary" id="default_icon">上传默认图标</button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-default">
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">选中图标</label>
                                    <div class="col-sm-2">
                                        <input type="hidden" class="form-control selected_icon" name="selected_icon" required="" aria-required="true">
                                        <button type="button" class="btn btn-secondary" id="selected_icon">上传选中图标</button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-selected">
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">操作</label>
                                    <div class="col-sm-5">
                                        <div class="custom-control custom-switch custom-checkbox-secondary custom-control-inline">
                                            <input name="status" checked type="checkbox"  class="custom-control-input" id="customSwitchInline2">
                                            <label class="custom-control-label" for="customSwitchInline2">状态[是否展示]</label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-secondary">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>

    {include file="public/footer"/}

    <script>
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;

            // 默认图标上传
            upload.render({
                elem: '#default_icon'
                ,url: '{:url("/console/imageReturn")}?path=identityDefaultIcon'
                ,before: function(obj){
                    layer.msg('默认图标上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    // console.log(res)
                    //上传完毕
                    var default_icon = $('.default_icon').val();
                    if (default_icon != '') {
                        // 删除旧图片
                        delImage(default_icon);
                        $('#uploader-default').children('.file-iteme').remove();
                    }
                    $('.default_icon').val(res.data.src);
                    $('#uploader-default').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle" src="'+ res.data.src +'"><span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span></div>' +
                        '<img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src='+ res.data.src +'>' +
                        // '<div class="info">' + res.data.name + '</div>' +
                        '</div>'
                    );
                }
            });

            // 选中图标上传
            upload.render({
                elem: '#selected_icon'
                ,url: '{:url("/console/imageReturn")}?path=identitySelectedIcon'
                ,before: function(obj){
                    layer.msg('选中图标上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    // console.log(res)
                    //上传完毕
                    var selected_icon = $('.selected_icon').val();
                    if (selected_icon != '') {
                        // 删除旧图片
                        delImage(qrcode);

                        $('#uploader-selected').children('.file-iteme').remove();
                    }
                    $('.selected_icon').val(res.data.src);
                    $('#uploader-selected').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle" src="'+ res.data.src +'"><span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span></div>' +
                        '<img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src='+ res.data.src +'>' +
                        // '<div class="info">' + res.data.name + '</div>' +
                        '</div>'
                    );
                }
            });

            // 图片删除
            function delImage(path) {
                $.post('{:url("/console/delImageOrVideo")}', {path:path} ,function (res) {
                    console.log(res)
                });
            }

            // 图片显示删除
            $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
                if(event.type === "mouseenter"){
                    //鼠标悬浮
                    $(this).children(".info").fadeIn("fast");
                    $(this).children(".handle").fadeIn("fast");
                }else if(event.type === "mouseleave") {
                    //鼠标离开
                    $(this).children(".info").hide();
                    $(this).children(".handle").hide();
                }
            });

            // 删除图片
            $(document).on("click", ".file-iteme .handle", function(event){
                console.log($(this).attr('src'))
                delImage($(this).attr('src'));
                $(this).parent().remove();
            });

        });

    </script>

</div>